<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数字</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    {% include "public/public.html" %}
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">


        <div class="layui-card-body">
            <form class="layui-form" style="white-space:nowrap!important;" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="startTime" lay-verify="date" placeholder="yyyy-MM-dd"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">结束时间：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="endTime" lay-verify="date" placeholder="yyyy-MM-dd"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-button-inline">
                            <button class="layui-btn layui-btn-normal" data-type="add" id="downData">下载数据</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <fieldset class="layui-elem-field layuimini-search">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 100px">代码：</label>
                        <div class="layui-input-inline" style="width: 150px">
                            <input type="text" id="tscode" name="tscode" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 100px">指数简称：</label>
                        <div class="layui-input-inline" style="width: 150px">
                            <input type="text" id="name" name="name" autocomplete="off" class="layui-input">
                        </div>
                    </div>


                    <div class="layui-inline">
                        <a class="layui-btn" lay-submit="" id="searchDate" lay-filter="data-search-btn">搜索</a>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
    <script></script>
    <table class="layui-hide" id="dataTable" lay-filter="currentTableFilter"></table>

</div>
</div>
</div>

<!-- <script src="/static/layuimini-master/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>-->
<script>
  var tableIns ;
    layui.use(['table', 'form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , table = layui.table
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#startTime'
        });
        laydate.render({
            elem: '#endTime'
        });


        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;

            //执行重载
            table.reload('table-content-specialist', {
                where: field
            });
        });


        //计划表
         tableIns = table.render({
            elem: '#dataTable'
            , url: "{% url 'indexbasic_date' %}" //模拟接口
            , method: "get"   //method:"post"(注意这里为get后台就是request.GET)
            , id: 'dataTable'
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                , countName: 'count' //规定数据总数的字段名称，默认：count
                , dataName: 'data' //规定数据列表的字段名称，默认：data
            },
            toolbar: true //开启导出工具
            , defaultToolbar: ['filter', 'print', 'exports'] //工具栏
            , cols: [[
                {type: 'checkbox', fixed: 'left', field: 'id'}
                , {field: 'ts_code', width: 150, title: '代码', sort: true}
                , {field: 'name', title: '指数简称', width: 150, sort: true}
                , {field: 'fullname', title: '指数简称', width: 150, sort: true}
                , {field: 'market', title: '交易所或服务商', width: 150, sort: true}
                , {field: 'publisher', title: '发布商', width: 150, sort: true}
                , {field: 'index_type', title: '指数风格', width: 150, sort: true}
                , {field: 'category', title: '指数类别', width: 150, sort: true}
                , {field: 'base_date', title: '基期', width: 150, sort: true}
                , {field: 'base_point', title: ' 基点', width: 150, sort: true}
            ]]
            , page: true
            , limit: 10
            , limits: [10, 15, 20, 25, 30]
            , text: '对不起，加载出现异常！'
        });


    });


    $("#downData").click(function () {
        var tscode = $("#tscode").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();

        // 不跨域要携带csrf_token 过去。
        var queryParameter = {
            csrfmiddlewaretoken: '{{ csrf_token }}', // 为了防止csrf_token的拦截，所以必须带这个过去。
            tscode: tscode,
            startTime: startTime,
            endTime: endTime,


        };
        $.ajax({
            url: '/stock/SIdownDate/',
            type: 'post',
            data: queryParameter,

            success: function (res) {
                data = JSON.parse(res);
                // alert(data)
                //console.log(data);
                //showDateLine(tscode);
            },
        })

    });


    $("#searchDate").click(function () {
        var tscode = $("#tscode").val();
        var name = $("#name").val();

        //这里以搜索为例
        tableIns.reload( {
            where: { //设定异步数据接口的额外参数，任意设
                tscode: tscode
                , name: name
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });

    });
</script>


</body>
</html>

